{include file='admin/header.html'}
<div class="layui-fluid" style="padding: 15px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md9 layui-col-sm8 layui-col-xs12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md4 layui-col-sm12">
                    <div class="layui-card">
                        <div class="layui-card-body" style="display: flex;">
                            <div
                                style="width: 64px;height: 64px;background-color: #f8bb74;border-radius: 50%;text-align: center;">
                                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="40" height="40"
                                    style="position: relative;top: 8px;" viewBox="0 0 32 32" fill="#ffffff">
                                    <path
                                        d="M26.5 32h-21c-0.828 0-1.5-0.672-1.5-1.5 0-2.152 0.908-4.756 2.43-6.967 1.272-1.847 2.834-3.238 4.521-4.050-0.744-0.676-1.384-1.501-1.891-2.441-0.813-1.508-1.242-3.252-1.242-5.041 0-2.488 0.819-4.838 2.306-6.618 1.552-1.858 3.639-2.881 5.876-2.881s4.324 1.023 5.876 2.882c1.487 1.78 2.306 4.131 2.306 6.618 0 1.79-0.43 3.533-1.242 5.041-0.507 0.941-1.147 1.765-1.891 2.441 1.687 0.812 3.25 2.203 4.521 4.050 1.521 2.21 2.43 4.815 2.43 6.967 0 0.828-0.672 1.5-1.5 1.5zM7.19 29h17.62c-0.288-1.229-0.891-2.575-1.711-3.766-1.295-1.882-2.912-3.113-4.551-3.466-0.691-0.149-1.184-0.76-1.184-1.466v-1.072c0-0.539 0.29-1.037 0.758-1.304 1.859-1.057 3.060-3.383 3.060-5.926 0-3.584-2.325-6.5-5.182-6.5s-5.182 2.916-5.182 6.5c0 2.543 1.201 4.869 3.060 5.926 0.469 0.267 0.758 0.764 0.758 1.304v1.072c0 0.707-0.493 1.317-1.184 1.466-1.639 0.353-3.256 1.584-4.551 3.466-0.82 1.191-1.423 2.537-1.711 3.766z">
                                    </path>
                                </svg>
                            </div>
                            <div style="margin-left: 10px;">
                                <h3 style="color: #555555;">会员数</h3>
                                <p style="margin-top: 10px;color: #f8bb74;font-size: 28px;">{$userCount}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4 layui-col-sm12">
                    <div class="layui-card">
                        <div class="layui-card-body" style="display: flex;">
                            <div
                                style="width: 64px;height: 64px;background-color: #86d2ee;border-radius: 50%;text-align: center;">
                                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32"
                                    style="position: relative;top: 15px;" viewBox="0 0 32 32" fill="#ffffff">
                                    <path
                                        d="M28.681 7.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378 0-2.5 1.121-2.5 2.5v27c0 1.378 1.122 2.5 2.5 2.5h23c1.378 0 2.5-1.122 2.5-2.5v-19.5c0-0.448-0.137-1.23-1.319-2.841zM24.543 5.457c0.959 0.959 1.712 1.825 2.268 2.543h-4.811v-4.811c0.718 0.556 1.584 1.309 2.543 2.268zM28 29.5c0 0.271-0.229 0.5-0.5 0.5h-23c-0.271 0-0.5-0.229-0.5-0.5v-27c0-0.271 0.229-0.5 0.5-0.5 0 0 15.499-0 15.5 0v7c0 0.552 0.448 1 1 1h7v19.5z">
                                    </path>
                                    <path
                                        d="M23 26h-14c-0.552 0-1-0.448-1-1s0.448-1 1-1h14c0.552 0 1 0.448 1 1s-0.448 1-1 1z">
                                    </path>
                                    <path
                                        d="M23 22h-14c-0.552 0-1-0.448-1-1s0.448-1 1-1h14c0.552 0 1 0.448 1 1s-0.448 1-1 1z">
                                    </path>
                                    <path
                                        d="M23 18h-14c-0.552 0-1-0.448-1-1s0.448-1 1-1h14c0.552 0 1 0.448 1 1s-0.448 1-1 1z">
                                    </path>
                                </svg>
                            </div>
                            <div style="margin-left: 10px;">
                                <h3 style="color: #555555;">文章数</h3>
                                <p style="margin-top: 10px;color: #86d2ee;font-size: 28px;">{$articleCount}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4 layui-col-sm12">
                    <div class="layui-card">
                        <div class="layui-card-body" style="display: flex;">
                            <div
                                style="width: 64px;height: 64px;background-color: #94e0e1;border-radius: 50%;text-align: center;">
                                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="36" height="36"
                                    style="position: relative;top: 12px;" viewBox="0 0 32 32" fill="#ffffff">
                                    <path
                                        d="M16 6c-1.717 0-3.375 0.271-4.928 0.804-1.46 0.502-2.76 1.211-3.863 2.108-2.069 1.681-3.209 3.843-3.209 6.088 0 1.259 0.35 2.481 1.039 3.63 0.711 1.185 1.781 2.268 3.093 3.133 0.949 0.625 1.587 1.623 1.755 2.747 0.056 0.375 0.091 0.753 0.105 1.129 0.233-0.194 0.461-0.401 0.684-0.624 0.755-0.755 1.774-1.172 2.828-1.172 0.168 0 0.336 0.011 0.505 0.032 0.655 0.083 1.325 0.126 1.99 0.126 1.717 0 3.375-0.271 4.928-0.804 1.46-0.502 2.76-1.211 3.863-2.108 2.069-1.681 3.209-3.843 3.209-6.088s-1.14-4.407-3.209-6.088c-1.104-0.897-2.404-1.606-3.863-2.108-1.553-0.534-3.211-0.804-4.928-0.804zM16 2v0c8.837 0 16 5.82 16 13s-7.163 13-16 13c-0.849 0-1.682-0.054-2.495-0.158-3.437 3.437-7.539 4.053-11.505 4.144v-0.841c2.142-1.049 4-2.961 4-5.145 0-0.305-0.024-0.604-0.068-0.897-3.619-2.383-5.932-6.024-5.932-10.103 0-7.18 7.163-13 16-13z">
                                    </path>
                                </svg>
                            </div>
                            <div style="margin-left: 10px;">
                                <h3 style="color: #555555;">评论数</h3>
                                <p style="margin-top: 10px;color: #94e0e1;font-size: 28px;">{$commentCount}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--图表-->
            <div class="layui-card" style="margin-top: 15px;">
                <div class="layui-card-body">
                    <div class="panel-body" id="chart" style="height: 376px;"></div>
                </div>
            </div>
            <!--服务器信息-->
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md3 layui-col-sm12">
                    <div class="layui-card">
                        <div class="layui-card-header">服务器环境</div>
                        <div class="layui-card-body">{$smarty.server.SERVER_SOFTWARE}</div>
                    </div>
                </div>
                <div class="layui-col-md3 layui-col-sm12">
                    <div class="layui-card">
                        <div class="layui-card-header">PHP 版本</div>
                        <div class="layui-card-body">{$smarty.const.PHP_VERSION}</div>
                    </div>
                </div>
                <div class="layui-col-md3 layui-col-sm12">
                    <div class="layui-card">
                        <div class="layui-card-header">数据库信息</div>
                        <div class="layui-card-body">{$databaseInfo}</div>
                    </div>
                </div>
                <div class="layui-col-md3 layui-col-sm12">
                    <div class="layui-card">
                        <div class="layui-card-header">服务器时间</div>
                        <div class="layui-card-body">{$serverCurrentTime}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3 layui-col-sm4 layui-col-xs12">
            <!--最新评论-->
            <div class="layui-card">
                <div class="layui-card-header">最新评论</div>
                <div class="layui-card-body">
                    {foreach from="$commentList" item="item" name="item"}
                    <div>
                        <a href="{if $item.status=='0'}{$item.article_link}#comment-{$item.id}{else}javascript:;{/if}"{if $item.status=='0'} target="_blank"{/if} title="{$item.article_title|strip_tags}" style="display: flex;">
                            <img alt="{if $item.nickname}{$item.nickname}{else}匿名{/if}" width="40" height="40" style="border-radius: 50%;"
                                src="{if $item.avatar}{$item.avatar}{else}{/if}">
                            <div style="margin-left: 10px;">
                                {if $item.nickname}{$item.nickname}{else}匿名{/if} ({$item.time|date:Y-m-d}) ：
                                <div>{$item.comment|strip_tags|modifier:mb_strimwidth(0, 30, '...', 'UTF-8')} {if $item['status']!='0'}[<strong style="color: #FF5722;">待审</strong>]{/if}</div>
                            </div>
                        </a>
                    </div>
                    {if !$smarty.foreach.item.last}
                    <hr>
                    {/if}
                    {foreachelse}
                    还没有评论
                    {/foreach}
                </div>
            </div>
            <!-- 最新留言 -->
            <div class="layui-card">
                <div class="layui-card-header">联系我们</div>
                <div class="layui-card-body">
                    <p>E-mail: hallelujahlord@foxmail.com<p>
                    <p style="margin-top:5px"><button type="button" class="layui-btn layui-btn-sm" lay-on="send"><i class="layui-icon layui-icon-email"></i> 联系我们</button></p>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{res file='res/echarts/echarts.js'}"></script>
<script type="text/javascript">
    layui.use(['layer', 'util', 'jquery'], function () {
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.jquery;
        util.event('lay-on', {
            send: function() {
                layer.open({
                    type: 2,
                    maxmin: true,
                    title: '联系我们',
                    shadeClose: true,
                    shade: 0.3,
                    area: [Math.max($(window).width() * 0.618, Math.min($(window).width() - 20, Math.max($(window).width() * 0.618, 480))) + 'px', Math.min($(window).height() - 20, Math.max($(window).height() * 0.809, 450)) + 'px'],
                    content: "{$site_url}/admin/sendmail.html",
                });
            }
        });
        //图表
        var myChart, charts;
        charts = JSON.parse('{$charts}');
        require.config({
            paths: {
                echarts: '{$site_url}/static/res/echarts'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line',
                'echarts/chart/map'
            ],
            function (ec) {
                //--- 折柱 ---
                myChart = ec.init(document.getElementById('chart'));
                myChart.setOption(
                    {
                        title: {
                            text: "数据统计",
                            textStyle: {
                                color: "rgb(85, 85, 85)",
                                fontSize: 18,
                                fontStyle: "normal",
                                fontWeight: "normal"
                            }
                        },
                        tooltip: {
                            trigger: "axis"
                        },
                        legend: {
                            data: ["会员", "文章", "评论"],
                            selectedMode: false,
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                dataView: {
                                    show: false,
                                    readOnly: true
                                },
                                magicType: {
                                    show: false,
                                    type: ["line", "bar", "stack", "tiled"]
                                },
                                restore: {
                                    show: false
                                },
                                saveAsImage: {
                                    show: false
                                },
                                mark: {
                                    show: false
                                }
                            }
                        },
                        calculable: false,
                        xAxis: [
                            {
                                type: "category",
                                boundaryGap: false,
                                data: charts.weeks
                            }
                        ],
                        yAxis: [
                            {
                                type: "value"
                            }
                        ],
                        grid: {
                            x2: 30,
                            x: 50
                        },
                        series: [
                            {
                                name: "会员",
                                type: "line",
                                smooth: true,
                                itemStyle: {
                                    normal: {
                                        areaStyle: {
                                            type: "default"
                                        }
                                    }
                                },
                                data: charts.users
                            },
                            {
                                name: "文章",
                                type: "line",
                                smooth: true,
                                itemStyle: {
                                    normal: {
                                        areaStyle: {
                                            type: "default"
                                        }
                                    }
                                },
                                data: charts.articles
                            },
                            {
                                name: "评论",
                                type: "line",
                                smooth: true,
                                itemStyle: {
                                    normal: {
                                        areaStyle: {
                                            type: "default"
                                        },
                                        color: "rgb(110, 211, 199)"
                                    }
                                },
                                data: charts.comments
                            }
                        ],
                        noDataLoadingOption: {
                            text: '还没有数据',
                            effect: 'bubble',
                            effectOption: {
                                backgroundColor: "rgba(0,0,0,0)",
                                effect: {
                                    n: 0
                                }
                            }
                        }
                    }
                );
            }
        );
        $(window).resize(function () {
            myChart.resize();
        })
    });
</script>
{include file='admin/footer.html'}